@charset "UTF-8";
html, body {
    font-family: '微软雅黑', Arial, Helvetica, sans-serif;
    color: #ffffff;
    background: #1C3972 url("../img/screenA/decorate_bg.png") no-repeat center;
    background-size: contain;
    margin: 0;
    padding: 0;
    width: 1920px;
    height: 720px;
    box-sizing: border-box;
    /*border: 1px solid red;*/
}

.alarmColor {
    color: #ff0000;
    text-shadow: 0 0 1px #000000;
}

.infoColor {
    color: #40F8FA;
}

h1.title {
    width: 100%;
    /* pointer-events: none; */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-align: center;
    margin: 20px 0 0 0;
    padding: 0;
    background: -webkit-linear-gradient(top, #8fffff, #1a61ea);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.content {
    margin-top: 8px;
    margin-bottom: 34px;
    position: relative;
}

.content .center,
.content .left,
.content .right {
    box-sizing: border-box;
    /*border: 1px solid #F0F0F0;*/
}

.content .left {
    width: 542px;
}

.content .right {
    width: 542px;
    margin-top: 46px;
    /*border: 1px solid red;*/
}

.content .center {
    width: 740px;
}

.timeWeather {
    position: absolute;
    right: 0;
    top: 48px;
    margin-right: 16px;
    z-index: 1;
}

.dateTime {
    margin-bottom: 14px;
}

.temper,
.hum,
.weather {
    height: 20px;
    min-width: 60px;
    margin-right: 15px;
}

.temper {
    background: url("../img/screenA/tem.png") no-repeat 2px center;
    background-size: 10px;
    padding-left: 16px;
}

.hum {
    background: url("../img/screenA/hum.png") no-repeat 2px center;
    background-size: 12px;
    padding-left: 18px;
}

.weather {
    background: url("../img/screenA/wea.png") no-repeat 2px center;
    background-size: 15px;
    padding-left: 20px;
}

/*.agrtlb {*/
/*position: relative;*/
/*}*/

.aglt,
.aglb,
.agrt,
.agrb {
    width: 8px;
    height: 8px;
    position: absolute;
}

.aglt {
    background: url("../img/screenA/ag_lt.png") no-repeat center;
    background-size: contain;
    left: 0;
    top: 0;
}

.aglb {
    background: url("../img/screenA/ag_lb.png") no-repeat center;
    background-size: contain;
    left: 0;
    bottom: 0;
}

.agrt {
    background: url("../img/screenA/ag_rt.png") no-repeat center;
    background-size: contain;
    right: 0;
    top: 0;
}

.agrb {
    background: url("../img/screenA/ag_rb.png") no-repeat center;
    background-size: contain;
    right: 0;
    bottom: 0;
}

.tit {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 20px;
}

.kqzl {
    width: 110px;
    height: 62px;
    margin-right: 24px;
    background-color: #2E96B4;
}

.center .top {
    margin-top: 24px;
    height: 84px;
}

.center .cDiv {
    margin-top: 23px;
    margin-bottom: 1px;
    background: rgba(0, 0, 0, 0.2);
    /*border: 1px solid #40F8FA;*/
    /*border: 1px solid #1E9FFF;*/
    box-shadow: 0 0 3px 0px #1E9FFF;
    border-radius: 3px;
}

.center .cDiv .tapCon {
    position: relative;
    width: 100%;
    height: 100%;
    display: none;
    box-sizing: border-box;
    padding: 5px;
}

.center .cDiv .tapCon.active {
    display: block;
}

.center .top .rect {
    width: 120px;
}

.ioLine {
    box-sizing: border-box;
    width: 100%;
    padding: 0 15px;
}

.ioLine .uf-f {
    margin-left: 20px;
}

.chartsBar {
    margin-top: 24px;
    margin-bottom: 12px;
    height: 180px;
    padding: 6px 10px 0px 5px;
    box-sizing: border-box;
    background-color: #23467D;
}

.chartsGauge {
    padding: 6px 5px 0px 5px;
    box-sizing: border-box;
    background-color: #23467D;
    width: 200px;
    height: 140px;
}

.list {
    box-sizing: border-box;
    background-color: #23467D;
    margin-left: 12px;
    padding: 6px 10px 5px 10px;
}

.list .tit {
    margin-bottom: 5px;
}

.box {
    box-sizing: border-box;
    background-color: #23467D;
    width: 172px;
    height: 182px;
    position: relative;
}

.box .pie {
    padding: 5px;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.boxStatus {
    margin: 0 10px 5px 10px;
}

.number,
.point {
    padding-left: 10px;
    font-size: 12px;
}

.point {
    --pointColor: yellow;
    position: relative;
    padding-bottom: 2px;
    font-size: 12px;
}

.number {
    text-shadow: 0 0 1px #000;
    font-size: 13px;
    font-weight: bold;
}

.point:after {
    background-color: yellow;
    background-color: var(--pointColor);
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.boxBtns {
    position: absolute;
    right: 0;
    top: 0;
}

.boxBtn {
    display: block;
    margin: 6px 5px 0px 0px;
    text-align: center;
    font-size: 12px;
    width: 30px;
    height: 15px;
    line-height: 15px;
    border: 1px solid #1E9FFF;
    color: #70CBFA;
    text-decoration: none;
    cursor: pointer;
}

.boxBtn:hover {
    color: #1E9FFF;
}

.imiTh {
    background-color: #2E568B;
}

.imiTh,
.imiTd {
    font-size: 12px;
    color: #70CBFA;
}

.imiTd:hover {
    color: #1E9FFF;
}

.imiTh div,
.imiTd div {
    box-sizing: border-box;
    padding: 5px 10px;
}

.imiTd {
    border-bottom: 1px solid #4575A0;
    text-decoration: none;
}

.loadingText {
    color: #1E9FFF;
    font-size: 12px;
    height: 20px;
    letter-spacing: 2px;
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.conTap {
    position: absolute;
    top: 0;
    left: 0;
    /*border-bottom: 1px solid #40F8FA;*/
    border-bottom: 1px solid #1E9FFF;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    /* overflow: hidden; */
    background: rgba(0, 0, 0, 0.2);
}

.conTap .tapBtn {
    padding: 8px 18px;
    letter-spacing: 1px;
    cursor: pointer;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    font-size: 14px;
    text-shadow: 0 0 1px #000000;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: #cccccc;
    /*border-right: 1px solid #40F8FA;*/
    border-right: 1px solid #1E9FFF;
    opacity: .6;
}

.conTap .tapBtn:hover {
    color: #1E9FFF;
    /*border-right: 1px solid #1E9FFF;*/
}

.conTap .tapBtn.active {
    color: #1E9FFF;
    /*border-right: 1px solid #1E9FFF;*/
    /*pointer-events: none;*/
    opacity: 1;
}

.crossLine {
    box-sizing: border-box;
    height: 50%;
    padding: 5px 0;
}

.crossLine .crossBox {
    position: relative;
    box-sizing: border-box;
    /*padding: 0 5px;*/
}

.crossLine .crossBox .videoTit {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
    padding: 5px 0;
    background: rgba(0, 0, 0, 0.5);
    letter-spacing: 2px;
    color: #70CBFA;
    font-size: 14px;
    text-shadow: 0 0 1px #000000;
}

.backLink {
    color: #70CBFA;
    text-decoration: none;
    font-size: 12px;
    position: absolute;
    left: 5px;
    top: 32px;
    z-index: 1;
}

.conContent {
    position: absolute;
    box-sizing: border-box;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    margin: auto;
    padding: 42px 10px 10px 10px;
}

.conContent .mark {
    position: absolute;
    right: 16px;
    top: 12px;
    font-size: 12px;
}

.conContent .mark .img {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 3px 0 8px;
}

.conContent .title {
    font-size: 14px;
    margin-bottom: 4px;
    letter-spacing: 1px;
}

#paging {
    height: 22px;
    color: #666666;
}

.visDiv,
.picsDiv,
.tarPics {
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.2);
    padding: 6px;
    border-radius: 2px;
}

.visDiv {
    width: 220px;
    margin-right: 6px;
}

.picsDiv {
}

.tarPics {
    margin-top: 6px;
    height: 138px;
}

.img {
    position: relative;
}

.img .ori,
.img .time {
    font-size: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 4px 2px;
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    text-align: center;
    color: #70CBFA;
    text-shadow: 0 0 1px #000;
}

.img .ori {
    top: 0;
}

.img .time {
    bottom: 0;
}

.img.type1:after,
.img.type2:after,
.img.type3:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    pointer-events: none;
    display: block;
}

.img.type1:after {
    box-shadow: inset 0 0 10px 1px #0000FF;
}

.img.type2:after {
    box-shadow: inset 0 0 10px 1px #FFFF00;
}

.img.type3:after {
    box-shadow: inset 0 0 10px 1px #FF0000;
}

.img img {
    display: block;
    vertical-align: middle;
    position: absolute;
    margin: auto;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.img.lf {
    float: left;
    width: 92px;
    height: 108px;
    margin: 2px;
    box-sizing: border-box;
    cursor: pointer;
}

.img.active {
    border: 1px solid #40F8FA;
}

.tar {
    /*width: 180px;*/
    box-sizing: border-box;
    border: 1px solid #40F8FA;
    margin-left: 10px;
}

.tar:first-child {
    margin-left: 0;
}

.tar .img {
    width: 84px;
    height: 100px;
    box-sizing: border-box;
    margin-right: 5px;
}

.tar .infoLine {
    font-size: 12px;
    padding: 2px 0 5px 0;
    color: #70CBFA;
}

/*高德地图*/
/*去掉地图上高德的logo和版本号，虽然很不道德*/
.amap-logo,
.amap-copyright {
    opacity: 0;
    display: none;
    pointer-events: none;
}

/*对话框窗口*/
.amap-info-content.amap-info-outer {
    background-color: rgba(7, 7, 107, 0.7);
    border: 1px solid #1E9FFF;
    /*border: none;*/
    color: #70CBFA;
}

/*对话框关闭按钮 X */
.amap-info-close {
    color: #1E9FFF;
}

/*对话框小角*/
.amap-info-sharp {
    background-image: url('../img/screenA/sharp2.png');
}

/*对话框小角*/
.bottom-center .amap-info-sharp {
    bottom: 0;
    left: 50%;
    border-left: none;
    border-right: none;
    border-top: none;
    height: 23px;
    margin: 0;
    overflow: hidden;
    position: relative;
    top: -1px;
    width: 30px;
    /*background-image: url('../img/screenA/sharp2.png');*/
}

.mapMark {
    height: 12px;
    width: 12px;
    opacity: 0.8;
    border-radius: 50%;
    border: 1px solid #0000FF;
    /*background-color: rgba(0, 0, 255, 0.6);*/
    box-shadow: inset 0 0 15px 0 #0000FF;
}

.mapMark.mark0 {
    border: 1px solid #0000FF;
    /*background-color: rgba(0, 0, 255, 0.6);*/
    box-shadow: inset 0 0 15px 0 #0000FF;
}

.mapMark.mark1 {
    border: 1px solid #FF0000;
    /*background-color: rgba(255, 0, 0, 0.6);*/
    box-shadow: inset 0 0 15px 0 #FF0000;
}

.mapMark.mark2 {
    border: 1px solid #CCCCCC;
    /*background-color: rgba(204, 204, 204, 0.6);*/
    box-shadow: inset 0 0 15px 0 #CCCCCC;
}

.mapMark.mark3 {
    border: 1px solid #FFFF00;
    /*background-color: rgba(255, 255, 0, 0.6);*/
    box-shadow: inset 0 0 15px 0 #FFFF00;
}

.mapMarkers {
    position: absolute;
    top: 12px;
    right: 18px;
    z-index: 1;
    font-size: 12px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-shadow: 0 0 1px #000000;
}

.mapMarkers .mapMark {
    margin: 0 4px 0 12px;
}